<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>demo3 useState</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">

    function MyApp() {

      const [index, setIndex] = React.useState(0);
      const [movies, setMovies] = React.useState(['The Shawshank Redemption', 'The Godfather', 'The Dark Knight', 'The Lord of the Rings: The Return of the King', 'Pulp Fiction']);

      function onPlayMovie() {
        console.log('Playing movie');

        if (index < movies.length - 1) {
          setIndex(index + 1);
        } else {
          setIndex(0);
        }
      }
      function onStopMovie() {
        console.log('Stopping movie');
      }

      return (
        <>
          <h1>Hello, world!</h1>
          <button onClick={onPlayMovie} style={{marginRight: '10px'}}>Play Movie</button >
          <button onClick={onStopMovie}>Stop Movie</button>
          <p>{movies[index]} {index}</p>
        </>
      )
    }

    const container = document.getElementById('root');
    const root = ReactDOM.createRoot(container);
    root.render(<MyApp />);

  </script>
</body>

</html>